<template>
  <div class="app-container">
    <div class="customContainer towSearchHeader">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-date-picker style="width:130px" v-model="pickerDate" :clearable="false" value-format="yyyy-MM" type="month" format="yyyy-MM"
            :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <span style="color: #888;">对接人：</span>
          <el-select v-model="formInline.docking_id" placeholder="请选择对接人" clearable style="width:130px">
            <el-option v-for="item in docking_list" :key="item.id" :label="item.nick" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="supplier_type" style="width:130px" @change="searchChange">
            <el-option v-for="item in search_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-autocomplete clearable v-model="searchVal" style="width:200px" :fetch-suggestions="querySearch" :placeholder="searchPld" :trigger-on-focus="false"
            valueKey="name" size="small" @keyup.enter.native="searchClick"></el-autocomplete>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
        <el-form-item>
          <el-tooltip class="item" effect="dark" placement="bottom-end">
            <div slot="content" style="line-height:20px;width:400px">
              采购金额、欠货金额、退货金额全部为0时，查询结果不展示
            </div>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table highlight-current-row :data="list" ref="table_one" v-loading.body="listLoading" border size="small" show-summary :summary-method="getSummaries">
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1+(currentPage-1)*100}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="供应商名称" prop="supplier_name"></el-table-column>
        <el-table-column align="center" label="供应商编号" prop="serial_number"></el-table-column>
        <el-table-column align="center" label="总部对接人" prop="clerk_nick"></el-table-column>
        <el-table-column align="center" label="付款类型">
          <template slot-scope="scope">
            <span>{{scope.row.pay_type|payTypeName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="上期欠货金额" prop="last_owe_goods_money" class-name="table_color"></el-table-column>
        <el-table-column align="center" label="上期欠款金额" prop="last_arrears_money" class-name="table_color"></el-table-column>
        <el-table-column align="center" label="本期采购金额" prop="purchase_money"></el-table-column>
        <el-table-column align="center" label="本期退货金额" prop="return_money"></el-table-column>
        <el-table-column align="center" label="本期调整金额" prop="adjust_money"></el-table-column>
        <el-table-column align="center" label="本期到货金额" prop="arrive_money"></el-table-column>
        <el-table-column align="center" label="本期实付金额" prop="pay_money"></el-table-column>
        <el-table-column align="center" label="本期退款金额" prop="refund_money"></el-table-column>
        <el-table-column align="center" label="本期调整退款金额" prop="adjust_refund_money"></el-table-column>
        <el-table-column align="center" label="本期让利金额" prop="benefit_money"></el-table-column>
        <el-table-column align="center" label="本期返现金额" prop="cashback_money"></el-table-column>
        <el-table-column align="center" label="本期已结束欠货金额" prop="owe_goods_money"></el-table-column>
        <el-table-column align="center" label="本期欠货金额" prop="now_owe_goods_money" class-name="table_color"></el-table-column>
        <el-table-column align="center" label="本期欠款金额" prop="now_arrears_money" class-name="table_color"></el-table-column>
      </el-table>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="100"
        layout="prev, pager, next, jumper" :total="totalDataNumber"></el-pagination>
    </div>
  </div>
</template>
<script>
import { getList, getPage } from '@/api/report/supStatement';
import { getDocking, getSup } from '@/api/common/commonApi';
import { pickerOptionsMonth } from '@/utils';
export default {
  data() {
    return {
      totalList: {
        last_owe_goods_money: 0,
        last_arrears_money: 0,
        purchase_money: 0,
        return_money: 0,
        adjust_money: 0,
        arrive_money: 0,
        pay_money: 0,
        refund_money: 0,
        adjust_refund_money: 0,
        benefit_money: 0,
        cashback_money: 0,
        owe_goods_money: 0,
        now_owe_goods_money: 0,
        now_arrears_money: 0
      },
      list: null,
      listLoading: false,
      showDialog: false,
      search_list: [
        { id: '1', name: '按供应商名称' },
        { id: '2', name: '按供应商编号' }
      ],
      docking_list: [],
      supplier_list: [], //供应商名称列表
      info_list: [], //详情列表
      info: { name: '', no: '', butt_man: '' }, //详情信息
      searchPld: '请输入供应商名称',
      supplier_type: '1',
      searchVal: '',
      formInline: {
        datetime: '',
        docking_id: '',
        supplier_no: '',
        supplier_name: ''
      },
      totalDataNumber: 1,
      currentPage: 1,
      pickerDate: new Date().toISOString().slice(0, 7),
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > new Date(new Date().getFullYear(), new Date().getMonth()).getTime() || time.getTime() < new Date('2020-04-30').getTime();
        }
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (!vm.list) {
        vm.getUserList();
      }
    });
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table_one.doLayout();
    });
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        if (index === 2||index === 3) {
          sums[index] = '-';
          return;
        }
        const values = (data || []).map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[5] = this.totalList.last_owe_goods_money;
          sums[6] = this.totalList.last_arrears_money;
          sums[7] = this.totalList.purchase_money;
          sums[8] = this.totalList.return_money;
          sums[9] = this.totalList.adjust_money;
          sums[10] = this.totalList.arrive_money;
          sums[11] = this.totalList.pay_money;
          sums[12] = this.totalList.refund_money;
          sums[13] = this.totalList.adjust_refund_money;
          sums[14] = this.totalList.benefit_money;
          sums[15] = this.totalList.cashback_money;
          sums[16] = this.totalList.owe_goods_money;
          sums[17] = this.totalList.now_owe_goods_money;
          sums[18] = this.totalList.now_arrears_money;
        } else {
          sums[index] = '-';
        }
      });

      return sums;
    },
    searchChange(val) {
      this.searchVal = '';
      this.searchPld = val == 1 ? '请输入供应商名称' : '请输入供应商编号';
    },
    getUserList() {
      getDocking({}).then(res => {
        this.docking_list = res;
        this.searchClick();
        this.getSupName();
      });
    },
    //获取供应商名称数组
    getSupName() {
      getSup({}).then(res => {
        this.supplier_list = res;
      });
    },
    querySearch(queryString, cb) {
      var supplier_list = this.supplier_list;
      var results = queryString ? supplier_list.filter(this.createFilter(queryString)) : supplier_list;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        if (this.supplier_type == 1) {
          return restaurant.name.indexOf(queryString) >= 0;
        } else {
          return false;
        }
      };
    },
    // 搜索
    searchClick() {
      this.formInline.datetime = this.pickerDate;
      this.formInline.supplier_name = this.supplier_type === '1' ? this.searchVal : '';
      this.formInline.supplier_no = this.supplier_type === '2' ? this.searchVal : '';
      this.fetchData();
    },
    getData(data) {
      data.forEach(val => {
        val.last_owe_goods_money = (val.last_owe_goods_money / 100).toFixed(2);
        val.last_arrears_money = (val.last_arrears_money / 100).toFixed(2);
        val.purchase_money = (val.purchase_money / 100).toFixed(2);
        val.return_money = (val.return_money / 100).toFixed(2);
        val.adjust_money = (val.adjust_money / 100).toFixed(2);
        val.arrive_money = (val.arrive_money / 100).toFixed(2);
        val.pay_money = (val.pay_money / 100).toFixed(2);
        val.refund_money = (val.refund_money / 100).toFixed(2);
        val.adjust_refund_money = (val.adjust_refund_money / 100).toFixed(2);
        val.benefit_money = (val.benefit_money / 100).toFixed(2);
        val.cashback_money = (val.cashback_money / 100).toFixed(2);
        val.owe_goods_money = (val.owe_goods_money / 100).toFixed(2);
        val.now_owe_goods_money = (val.now_owe_goods_money / 100).toFixed(2);
        val.now_arrears_money = (val.now_arrears_money / 100).toFixed(2);
      });
      this.list = data;
      this.listLoading = false;
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      this.list = [];
      getPage(this.formInline)
        .then(response => {
          if (response.code == 1) {
            let total_data = response.data.all;
            this.totalList.last_owe_goods_money = (total_data.last_owe_goods_money / 100).toFixed(2);
            this.totalList.last_arrears_money = (total_data.last_arrears_money / 100).toFixed(2);
            this.totalList.purchase_money = (total_data.purchase_money / 100).toFixed(2);
            this.totalList.return_money = (total_data.return_money / 100).toFixed(2);
            this.totalList.adjust_money = (total_data.adjust_money / 100).toFixed(2);
            this.totalList.arrive_money = (total_data.arrive_money / 100).toFixed(2);
            this.totalList.pay_money = (total_data.pay_money / 100).toFixed(2);
            this.totalList.refund_money = (total_data.refund_money / 100).toFixed(2);
            this.totalList.adjust_refund_money = (total_data.adjust_refund_money / 100).toFixed(2);
            this.totalList.benefit_money = (total_data.benefit_money / 100).toFixed(2);
            this.totalList.cashback_money = (total_data.cashback_money / 100).toFixed(2);
            this.totalList.owe_goods_money = (total_data.owe_goods_money / 100).toFixed(2);
            this.totalList.now_owe_goods_money = (total_data.now_owe_goods_money / 100).toFixed(2);
            this.totalList.now_arrears_money = (total_data.now_arrears_money / 100).toFixed(2);
            this.totalDataNumber = response.data.page * 100;
            if (!this.totalDataNumber) {
              this.listLoading = false;
              return;
            }
            getList(this.formInline).then(res => {
              if (res.code == 1) {
                this.getData(res.data);
              }
            });
          } else {
            this.listLoading = false;
          }
        })
        .catch(res => {
          this.listLoading = false;
        });
    },
    handleCurrentChange(val) {
      this.listLoading = true;
      this.list = [];
      getList(this.formInline, val).then(res => {
        this.getData(res.data);
        this.listLoading = false;
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.info {
  .info_item {
    display: inline-block;
    margin: 0 30px 10px 0;
    .name {
      display: inline-block;
      vertical-align: top;
      width: 310px;
    }
  }
  .tag {
    margin-right: 20px;
    width: 400px;
  }
}
</style>